<template>
  <div class="levelcode">
    <el-card class="box-symptom">
      <h3>病种级别管理</h3>
      <div class="symptom">
        <el-row :span="20">
          <el-col :span="8">
            <el-input
              placeholder="请输入内容"
              class="input-with-select"
              clearable
              v-model="searchInput"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="isSearch"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1.8" style="margin: 0 36px 0 26px">
            <el-button type="primary" @click="openReset">重置</el-button>
          </el-col>
          <el-col :span="4"
            ><el-button type="primary" @click="addSymptomOpen"
              >添加病种级别码</el-button
            ></el-col
          >
        </el-row>
      </div>
      <el-table :data="symptom" style="width: 100%">
        <el-table-column
          prop="no"
          align="center"
          label="级别代号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="级别名称"
        ></el-table-column>
        <el-table-column
          prop="standard"
          align="center"
          label="收费标准（单位：%）"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="changeSymptomOpen(scope.row)" size="mini"
              >修改</el-button
            >
            <el-button
              @click="delSymptomOpen(scope.row)"
              size="mini"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加病种级别码模态框 -->
      <el-dialog
        title="添加病种级别"
        append-to-body
        @close="addDialogClosed"
        :visible.sync="addSymptomDialogVisible"
        width="24%"
      >
        <el-form
          ref="addFormRef"
          label-width="90px"
          :rules="formRules"
          :model="addSymptomFrom"
        >
          <el-form-item prop="no" label="级别代号">
            <el-input v-model="addSymptomFrom.no"></el-input>
          </el-form-item>
          <el-form-item prop="name" label="级别名称">
            <el-input v-model="addSymptomFrom.name"></el-input>
          </el-form-item>
          <el-form-item prop="standard" label="收费标准">
            <el-input v-model="addSymptomFrom.standard">
              <span slot="append">单位：% </span>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addSymptomDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSymptom">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改病种级别码模态框 -->
      <el-dialog
        title="修改病种级别"
        append-to-body
        @close="changeDialogClosed"
        :visible.sync="changeSymptomDialogVisible"
        width="24%"
      >
        <el-form
          ref="changeFormRef"
          label-width="90px"
          :model="changeSymptomFrom"
        >
          <el-form-item label="级别代号">
            <el-input disabled v-model="changeSymptomFrom.no"></el-input>
          </el-form-item>
          <el-form-item label="级别名称">
            <el-input v-model="changeSymptomFrom.name"></el-input>
          </el-form-item>
          <el-form-item label="收费标准">
            <el-input v-model="changeSymptomFrom.standard">
              <span slot="append">单位：% </span>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeSymptomDialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="changeSymptom">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
    <el-divider></el-divider>

    <el-card class="box-hospital">
      <h3>医院级别管理</h3>
      <div class="hospital">
        <el-row :span="20">
          <el-col :span="8">
            <el-input
              placeholder="请输入内容"
              class="input-with-select"
              clearable
              v-model="searchInput2"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="isSearch2"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="1.8" style="margin: 0 36px 0 26px">
            <el-button type="primary" @click="openReset2">重置</el-button>
          </el-col>
          <el-col :span="4"
            ><el-button type="primary" @click="addhospitalOpen"
              >添加医院级别码</el-button
            ></el-col
          >
        </el-row>
      </div>
      <el-table :data="hospital" style="width: 100%">
        <el-table-column
          prop="no"
          align="center"
          label="级别代号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="级别名称"
        ></el-table-column>
        <el-table-column
          prop="standard"
          align="center"
          label="收费标准"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="changeHospitalOpen(scope.row)" size="mini"
              >修改</el-button
            >
            <el-button
              @click="delHospitalOpen(scope.row)"
              size="mini"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加医院级别码模态框 -->
      <el-dialog
        title="添加病种级别"
        append-to-body
        @close="addHospitalDialogClosed"
        :visible.sync="addHospitalDialogVisible"
        width="24%"
      >
        <el-form
          ref="addHospitalFormRef"
          label-width="90px"
          :rules="formRules2"
          :model="addHospitalFrom"
        >
          <el-form-item prop="no" label="级别代号">
            <el-input v-model="addHospitalFrom.no"></el-input>
          </el-form-item>
          <el-form-item prop="name" label="级别名称">
            <el-input v-model="addHospitalFrom.name"></el-input>
          </el-form-item>
          <el-form-item prop="standard" label="收费标准">
            <el-input v-model="addHospitalFrom.standard">
              <span slot="append">单位：% </span>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addHospitalDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addHospital">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改医院级别码模态框 -->
      <el-dialog
        title="修改病种级别"
        append-to-body
        @close="changeHospitalDialogClosed"
        :visible.sync="changeHospitalDialogVisible"
        width="24%"
      >
        <el-form
          ref="changeHospitalFormRef"
          label-width="90px"
          :model="changeHospitalFrom"
        >
          <el-form-item label="级别代号">
            <el-input disabled v-model="changeHospitalFrom.no"></el-input>
          </el-form-item>
          <el-form-item label="级别名称">
            <el-input v-model="changeHospitalFrom.name"></el-input>
          </el-form-item>
          <el-form-item label="收费标准">
            <el-input v-model="changeHospitalFrom.standard">
              <span slot="append">单位：% </span>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeHospitalDialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="changeHospital">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    // 请求验证规则
    let addnoRules = (rule, value, callback) => {
      this.symptom.forEach((item) => {
        if (item.no == value) {
          callback(new Error("该代号已被使用！请重新输入"));
        } else {
          callback();
        }
      });
    };

    let addnameRules = (rule, value, callback) => {
      this.symptom.forEach((item) => {
        if (item.name == value) {
          callback(new Error("该名称已经存在！请重新输入"));
        } else {
          callback();
        }
      });
    };

    //医院验证
    let addnoRules2 = (rule, value, callback) => {
      this.hospital.forEach((item) => {
        if (item.no == value) {
          callback(new Error("该代号已被使用！请重新输入"));
        } else {
          callback();
        }
      });
    };

    let addnameRules2 = (rule, value, callback) => {
      this.hospital.forEach((item) => {
        if (item.name == value) {
          callback(new Error("该名称已经存在！请重新输入"));
        } else {
          callback();
        }
      });
    };
    return {
      //假数据
      symptom: [
        {
          no: "A4",
          name: "感冒",
          standard: 10,
        },
        {
          no: "B1",
          name: "感冒2",
          standard: 10,
        },
      ],
      hospital: [
        { no: 2, name: "蒋惺惺狗民医院", standard: 10 },
        { no: 5, name: "蒋惺惺狗民医院", standard: 10 },
      ],
      //自定义表单验证
      // 病种
      formRules: {
        no: [
          {
            required: true,
            message: "请输入病种代号",
            trigger: "blur",
          },
          {
            min: 1,
            max: 2,
            message: "要求长度为1或者2个字符",
          },
          {
            validator: addnoRules,
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入病种名称",
            trigger: "blur",
          },
          {
            validator: addnameRules,
            trigger: "blur",
          },
        ],
        standard: [
          {
            required: true,
            message: "请输入计费标准",
            trigger: "blur",
          },
        ],
      },
      // 医院
      formRules2: {
        no: [
          {
            required: true,
            message: "请输入医院级别代号",
            trigger: "blur",
          },
          {
            min: 1,
            max: 2,
            message: "要求长度为1或者2个字符",
          },
          {
            validator: addnoRules2,
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入病种名称",
            trigger: "blur",
          },
          {
            validator: addnameRules2,
            trigger: "blur",
          },
        ],
        standard: [
          {
            required: true,
            message: "请输入计费标准",
            trigger: "blur",
          },
        ],
      },
      //搜索
      searchInput: "",
      searchInput2: "",

      //添加病种
      addSymptomDialogVisible: false,
      addSymptomFrom: {},

      //修改病种
      changeSymptomDialogVisible: false,
      changeSymptomFrom: {},

      //添加医级
      addHospitalDialogVisible: false,
      addHospitalFrom: {},

      //修改医级
      changeHospitalDialogVisible: false,
      changeHospitalFrom: {},
    };
  },
  created() {
    //获取数据
    // this.getSymptomData();
    //获取医院级别信息
    // this.getHospitalData();
  },
  methods: {
    //获取病种数据
    // getSymptomData() {
    //   this.$http({
    //     url: "获取病种数据接口",
    //     method: "??",
    //   }).then((data) => {
    //     console.log(data);
    //   });
    // },
    //获取医院级别信息
    // getHospitalData() {
    //   this.$http({
    //     url: "获取医院数据接口",
    //     method: "??",
    //   }).then((data) => {
    //     console.log(data);
    //   });
    // },

    isSearch() {},
    openReset() {},
    //添加打开模态框
    addSymptomOpen() {
      this.addSymptomDialogVisible = true;
    },
    //添加
    addSymptom() {
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          let addInfo = JSON.parse(JSON.stringify(this.addSymptomFrom));
          console.log(addInfo);
          // 添加数据
          // this.$http({
          //   url:'添加请求',
          //   method:'方式',
          //   params:addInfo
          // }).then(data=>{
          //   console.log(data);
          // if (成功) {
          // this.getSymptomData()
          // }
          // })
        } else {
          this.$message.error("信息有误！添加失败");
        }
        this.addSymptomDialogVisible = false;
      });
    },
    //关闭模态框清除信息
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },

    //修改
    changeSymptomOpen(valObj) {
      this.changeSymptomFrom = valObj;
      this.changeSymptomDialogVisible = true;
    },
    changeDialogClosed() {
      this.changeSymptomFrom = {};
      this.$refs.changeFormRef.resetFields();
    },
    changeSymptom() {
      let changeInfo = JSON.parse(JSON.stringify(this.changeSymptomFrom));
      this.$refs.changeFormRef.validate((valid) => {
        if (valid) {
          console.log(changeInfo);
          // 修改数据
          // this.$http({
          //   url:'修改请求',
          //   method:'方式',
          //   params:changeInfo
          // }).then(data=>{
          //   console.log(data);
          // if (成功) {
          // this.getSymptomData()
          // }
          // })
        } else {
          console.log(valid);
          this.$message.error("信息有误！添加失败");
        }
        this.changeSymptomDialogVisible = false;
      });
    },

    //删除病种
    delSymptomOpen(valObj) {
      let ID = valObj.no;
      console.log(ID);
    },
    //医院

    isSearch2() {},
    openReset2() {},
    //添加打开模态框
    addhospitalOpen() {
      this.addHospitalDialogVisible = true;
    },
    //添加
    addHospital() {
      this.$refs.addHospitalFormRef.validate((valid) => {
        if (valid) {
          let addInfo = JSON.parse(JSON.stringify(this.addHospitalFrom));
          console.log(addInfo);
          // 添加数据
          // this.$http({
          //   url:'添加请求',
          //   method:'方式',
          //   params:addInfo
          // }).then(data=>{
          //   console.log(data);
          // if (成功) {
          // this.getHospitalData()
          // }
          // })
        } else {
          this.$message.error("信息有误！添加失败");
        }
        this.addHospitalDialogVisible = false;
      });
    },
    //关闭模态框清除信息
    addHospitalDialogClosed() {
      this.$refs.addHospitalFormRef.resetFields();
    },

    //修改
    changeHospitalOpen(valObj) {
      this.changeHospitalFrom = valObj;
      this.changeHospitalDialogVisible = true;
    },
    changeHospitalDialogClosed() {
      this.changeHospitalFrom = {};
      this.$refs.changeHospitalFormRef.resetFields();
    },
    changeHospital() {
      let changeInfo = JSON.parse(JSON.stringify(this.changeHospitalFrom));
      this.$refs.changeFormRef.validate((valid) => {
        if (valid) {
          console.log(changeInfo);
          // 修改数据
          // this.$http({
          //   url:'修改请求',
          //   method:'方式',
          //   params:changeInfo
          // }).then(data=>{
          //   console.log(data);
          // if (成功) {
          // this.getHospitalData()
          // }
          // })
        } else {
          console.log(valid);
          this.$message.error("信息有误！添加失败");
        }
        this.changeHospitalDialogVisible = false;
      });
    },

    //删除
    delHospitalOpen(valObj) {
      let ID = valObj.no;
      console.log(ID);
    },
  },
};
</script>
<style lang="less" scoped>
.levelcode {
  .box-symptom {
    h3 {
      font-size: 14px;
      font-weight: 450;
    }
    .symptom {
      padding-top: 20px;
    }
  }
  .box-hospital {
    h3 {
      font-size: 14px;
      font-weight: 450;
    }
    .hospital {
      padding-top: 20px;
    }
  }
}
</style>
